<template>
  <dv-border-box-8 style="padding-top: 10px">
    <dv-decoration-7 style="width:100%;height:30px;">库存预警</dv-decoration-7>
    <div style="height: 250px;width: 100%;padding: 5px">
      <dv-scroll-board :config="config"/>
    </div>
  </dv-border-box-8>
</template>

<script>

export default {
  name: "Inventory",
  data() {
    return {
      config: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      // 使用静态数据代替API调用
      const staticData = [
        { materialName: '钢材', warehouseName: 'A仓库', totalInventory: 1500, inventoryLower: 2000, inventoryLimit: 5000 },
        { materialName: '铝材', warehouseName: 'B仓库', totalInventory: 3500, inventoryLower: 3000, inventoryLimit: 6000 },
        { materialName: '塑料', warehouseName: 'C仓库', totalInventory: 800, inventoryLower: 1000, inventoryLimit: 3000 },
        { materialName: '铜材', warehouseName: 'D仓库', totalInventory: 5500, inventoryLower: 4000, inventoryLimit: 7000 },
        { materialName: '木材', warehouseName: 'E仓库', totalInventory: 2500, inventoryLower: 2000, inventoryLimit: 5000 }
      ];

      this.config = {
        header: ['编号', '物料', '仓库', '库存', '状态'],
        data: [],
        align: ['center'],
        rowNum: 5,
        headerBGC: '#1981f6',
        headerHeight: 45,
        oddRowBGC: 'rgba(0, 44, 81, 0.8)',
        evenRowBGC: 'rgba(10, 29, 50, 0.8)'
      }

      staticData.forEach((item, index) => {
        this.config.data.push([
          index + 1,
          item.materialName,
          item.warehouseName,
          item.totalInventory,
          this.getStatus(item)
        ])
      })
    },
    getStatus(row) {
      if (row.inventoryLower && row.totalInventory < row.inventoryLower) {
        return '<span style="color:green;">不足</span>';
      }
      if (row.inventoryLimit && row.totalInventory > row.inventoryLimit) {
        return '<span style="color:red;">溢出</span>';
      }
      return '正常';
    }
  },
  mounted() {

  },
}
</script>

<style lang="scss" scoped>

</style>
